<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 20px;height:20px;background: red;position: absolute;left:0;top:0;border-radius: 50%;}
    </style>
</head>
<body>
    <!-- <div id="box"></div> -->
</body>
<script>

    // const obox = document.getElementById("box")

    let t = null;

    let now = 225;

    const target = 305;

    let speed = 10;

    const r = 200;

    document.onclick = function(){
        clearInterval(t)
        t = setInterval(()=>{
            if(now === target){
                clearInterval(t);
            }else{

                const obox = document.createElement("div");
                obox.id = "box";
                document.body.appendChild(obox);

                now += speed;
                
                obox.style.left = Math.cos( Math.PI / 180 * now ) * r + r + "px";
                obox.style.top = Math.sin( Math.PI / 180 * now ) * r + r + "px";

                
                // sin = y / r
                // cos = x / r

                // x = cos * r
                // y = sin * r

                // x = Math.cos(弧度) * r
                // y = Math.sin(弧度) * r

                // x = Math.cos( Math.PI / 180 * now ) * r
                // y = Math.sin( Math.PI / 180 * now ) * r
            }
        }, 30);
    }
</script>
</html>